<script setup>
name: 'goods'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getCartListAPI, delCartAPI, editCartAPI } from '@/api/productAPI'
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment'

const router = useRouter()

// 获取商品列表
const queryInfo = ref({
    query: '',
    pagenum: 1,
    pagesize: 20
})
const cartList = ref([])
const total = ref(0)
const getCartList = async () => {
    const { data: res } = await getCartListAPI(queryInfo.value)
    if (res.meta.status !== 200) return ElMessage.error(res.meta.msg)
    cartList.value = res.data.goods
    total.value = res.data.total
}

const handleSizeChange = (val) => {
    queryInfo.value.pagesize = val
    getCartList()
}

const handleCurrentChange = (val) => {
    queryInfo.value.pagenum = val
    getCartList()
}

// 删除商品
const delDialog = async (row) => {
    const confirmResult = await ElMessageBox.confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).catch(err => err)
    if (confirmResult === 'confirm') {
        const { data: res } = await delCartAPI(row.goods_id)
        if (res.meta.status !== 200) return ElMessage.error(res.meta.msg)
        ElMessage.success(res.meta.msg)
        getCartList()
    } else {
        ElMessage.info('已取消删除')
    }
}

// 表单验证
const rules = {
    goods_name: [
        { required: true, message: '商品名称为必填项', trigger: 'blur' },
        { min: 6, message: '最少输入6个字符', trigger: 'blur' },
    ],
    goods_price: [
        { required: true, message: '商品价格为必填项', trigger: 'blur' }
    ],
    goods_number: [
        { required: true, message: '商品数量为必填项', trigger: 'blur' }
    ],
    goods_weight: [
        { required: true, message: '商品重量为必填项', trigger: 'blur' }
    ]
}

// 编辑商品
const editForm = ref({
    // 商品名称
    goods_name: '',
    // 价格
    goods_price: 0,
    // 数量
    goods_number: 0,
    // 重量
    goods_weight: 0
})

const editDialogVisible = ref(false)
const editFormRef = ref(null)
const goodId = ref(0)
const editDialog = (row) => {
    editForm.value.goods_name = row.goods_name
    editForm.value.goods_price = row.goods_price
    editForm.value.goods_number = row.goods_number
    editForm.value.goods_weight = row.goods_weight
    goodId.value = row.goods_id
    editDialogVisible.value = true
}
const editHandleClose = () => {
    editFormRef.value.resetFields()
    goodId.value = 0
    editForm.value = {
        // 商品名称
        goods_name: '',
        // 价格
        goods_price: 0,
        // 数量
        goods_number: 0,
        // 重量
        goods_weight: 0
    }
}

const editCart = async () => {
    const { data: res } = await editCartAPI(goodId.value, editForm.value)
    if (res.meta.status !== 200) return ElMessage.error(res.meta.msg)
    ElMessage.success(res.meta.msg)
    editDialogVisible.value = false
    getCartList()
}

onMounted(() => {
    getCartList()
})

</script>

<template>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
        <el-row :gutter="20">
            <el-col :span="9">
                <el-input placeholder="请输入内容" clearable v-model="queryInfo.query" @clear="getCartList">
                    <template #append>
                        <el-button icon="Search" @click="getCartList" />
                    </template>
                </el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="router.push('/home/goods/add')">添加商品</el-button>
            </el-col>
        </el-row>
        <!-- 表格视图 -->
        <!-- 表格区域 -->
        <el-table :data="cartList" stripe border style="width: 100%">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="goods_name" label="商品名称" />
            <el-table-column prop="goods_price" label="商品价格" width="95" />
            <el-table-column prop="goods_weight" label="商品重量" width="100" />
            <el-table-column label="创建时间" width="170">
                <template v-slot="scope">
                    {{ moment(scope.row.add_tiem).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="130">
                <template v-slot="scope">
                    <el-button type="primary" icon="Edit" @click="editDialog(scope.row)"></el-button>
                    <el-button type="danger" icon="Delete" @click="delDialog(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="queryInfo.pagenum" :page-size="queryInfo.pagesize" background
            :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>
    <!-- 编辑提交商品对话框 -->
    <el-dialog v-model="editDialogVisible" title="修改商品" width="50%" @closed="editHandleClose">
        <el-form :model="editForm" ref="editFormRef" :rules="rules">
            <el-form-item label="商品名称" prop="goods_name">
                <el-input v-model="editForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
                <el-input v-model="editForm.goods_price" type="number" min="0"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
                <el-input v-model="editForm.goods_number" type="number" min="0"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
                <el-input v-model="editForm.goods_weight" type="number" min="0"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="editCart">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped></style>